<template>
    <div class="detailTask" :style="`margin-bottom:${checkType == 'hz' ? '80' : '0'}px`">
        <header-nav :leftArrow="true" :titelText="'检查任务详情'"></header-nav>
        <div class="detail" :style="(detailForm.taskStatus == 1 &&
        (userId == detailForm.checkerId || userId == detailForm.organizerId)) ||
        (detailForm.handleShowFlag == 1 && (userId == detailForm.checkerId || userId == detailForm.organizerId)) ||
        detailForm.reviewType === 1 ||
        detailForm.registerType === false ||
        checkType == 'fc' ||
        checkType == 'other' ||
        checkType == 'hz'
        ? 'height: calc(100% - 122px);'
        : 'height: calc(100% - 46px);'
        ">
            <van-tabs v-model:active="active" :show-header="recordData.length > 0 ? true : false">
                <van-tab title="基础信息">
                    <div class="infoBox">
                        <div class="title">
                            <div class="title-left">
                                <div class="titleIcon"></div>
                                <div>任务信息</div>
                            </div>
                        </div>
                        <div class="info">
                            <div class="infoItem">
                                <div class="left">任务编号</div>
                                <div class="right">
                                    {{ detailForm.taskNo }}
                                </div>
                            </div>
                            <div class="infoItem">
                                <div class="left">检查类型</div>
                                <div class="right">
                                    {{ detailForm.checkTypeName }}
                                </div>
                            </div>
                            <div class="infoItem">
                                <div class="left">任务状态</div>
                                <div class="right">
                                    {{
        detailForm.taskStatus == 1
            ? '未开始'
            : detailForm.taskStatus == 2
                ? '进行中'
                : detailForm.taskStatus == 3
                    ? '待判定'
                    : detailForm.taskStatus == 4
                        ? '待处理'
                        : detailForm.taskStatus == 5
                            ? '已结束' : detailForm.taskStatus == 6
                                ? '待回证'
                                : ''
    }}
                                </div>
                            </div>
                            <div class="infoItem" v-if="detailForm.taskStatus > 3">
                                <div class="left">检查结果</div>
                                <div class="right">
                                    {{
        detailForm.checkResult == 1
            ? '合格'
            : detailForm.checkResult == 2
                ? '不合格'
                : ''
    }}
                                </div>
                            </div>
                            <div class="infoItem" v-if="detailForm.taskStatus > 3">
                                <div class="left">检查时间</div>
                                <div class="right">{{ detailForm.endCheckTime }}</div>
                            </div>
                            <div class="infoItem">
                                <div class="left">主办人</div>
                                <div class="right">{{ detailForm.checkerName }}</div>
                            </div>
                            <div class="infoItem">
                                <div class="left">协办人</div>
                                <div class="right">{{ detailForm.organizerName }}</div>
                            </div>
                            <div class="infoItem" v-if="detailForm.taskStatus == 1 || detailForm.taskStatus == 2">
                                <div class="left">期限提醒</div>
                                <div class="right">
                                    <div :class="'style' + detailForm.reminderType"></div>
                                </div>
                            </div>
                            <div class="infoItem" v-if="from == 2">
                                <div class="left">安全等级</div>
                                <div class="right" v-if="detailForm.placeInfo?.safeLevel == 1">
                                    安全
                                </div>
                                <div class="right" v-if="detailForm.placeInfo?.safeLevel == 2">
                                    中等
                                </div>
                                <div class="right" v-if="detailForm.placeInfo?.safeLevel > 2">
                                    危险
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="infoBox">
                        <div class="title">
                            <div class="title-left">
                                <div class="titleIcon"></div>
                                <div>当事人信息</div>
                            </div>
                            <div class="title-right">
                                {{
        detailForm.placeInfo?.partyType == 0
            ? '自然人'
            : detailForm.placeInfo?.partyType == 1
                ? '法人'
                : detailForm.placeInfo?.partyType == 2
                    ? '个体工商户'
                    : detailForm.placeInfo?.partyType == 3
                        ? '非法人组织'
                        : ''
    }}
                            </div>
                        </div>
                        <div class="info">
                            <div class="infoItem">
                                <div class="left">
                                    {{
            detailForm.placeInfo?.partyType == 0
                ? '姓名'
                : detailForm.placeInfo?.partyType == 2
                    ? '字号名称'
                    : '单位名称'
        }}
                                </div>
                                <div class="right">
                                    {{ detailForm.placeInfo?.placeName }}
                                </div>
                            </div>
                            <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 0">
                                <div class="left">性别</div>
                                <div class="right">
                                    {{
        detailForm.placeInfo?.sex == 1
            ? '男'
            : detailForm.placeInfo?.sex == 2
                ? '女'
                : ''
    }}
                                </div>
                            </div>
                            <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 0">
                                <div class="left">出生日期</div>
                                <div class="right">
                                    {{ detailForm.placeInfo?.birthDate }}
                                </div>
                            </div>
                            <div class="infoItem">
                                <div class="left">
                                    {{
        detailForm.placeInfo?.partyType == 0 ||
            detailForm.placeInfo?.partyType == 2
            ? '联系电话'
            : '单位联系电话'
    }}
                                </div>
                                <div class="right">{{ detailForm.placeInfo?.contactsTel }}</div>
                            </div>
                            <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 0">
                                <div class="left">证件类型</div>
                                <div class="right">{{ detailForm.placeInfo?.idTypeName }}</div>
                            </div>
                            <div class="infoItem">
                                <div class="left">
                                    {{
        detailForm.placeInfo?.partyType == 0
            ? '证件号码'
            : '社会统一信用代码'
    }}
                                </div>
                                <div class="right">{{ detailForm.placeInfo?.idCode }}</div>
                            </div>
                            <div class="infoItem" v-if="detailForm.placeInfo?.partyType != 0">
                                <div class="left">
                                    {{
        detailForm.placeInfo?.partyType == 1
            ? '法人'
            : detailForm.placeInfo?.partyType == 3
                ? '负责人'
                : '经营者姓名'
    }}
                                </div>
                                <div class="right">{{ detailForm.placeInfo?.headName }}</div>
                            </div>
                            <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 1 ||
        detailForm.placeInfo?.partyType == 3
        ">
                                <div class="left">
                                    {{
        detailForm.placeInfo?.partyType == 1 ? '法人电话' : '负责人电话'
    }}
                                </div>
                                <div class="right">{{ detailForm.placeInfo?.headTel }}</div>
                            </div>

                            <div class="infoItem" v-if="detailForm.placeInfo?.partyType != 0">
                                <div class="left">注册地址</div>
                                <div class="right">
                                    {{
        detailForm.placeInfo?.registerCity +
        detailForm.placeInfo?.registerCounty +
        detailForm.placeInfo?.registerTown +
        detailForm.placeInfo?.registerAddress
    }}
                                </div>
                            </div>
                            <div class="infoItem">
                                <div class="left">
                                    {{ detailForm.placeInfo?.partyType == 0 ? '住址' : '经营地址' }}
                                </div>
                                <div class="right">
                                    {{
        detailForm.placeInfo?.operateCity +
        detailForm.placeInfo?.operateCounty +
        detailForm.placeInfo?.operateTown +
        detailForm.placeInfo?.operateAddress
    }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="infoBox" v-if="yyzzImgs.length > 0">
                        <div class="title">
                            <div class="title-left">
                                <div class="titleIcon"></div>
                                <div>营业执照/身份证</div>
                            </div>
                        </div>
                        <div class="info">
                            <upload-pictrue :fileList="yyzzImgs" :imgType="1"></upload-pictrue>
                        </div>
                    </div>
                    <div class="infoBox" v-if="jzwImgs.length > 0">
                        <div class="title">
                            <div class="title-left">
                                <div class="titleIcon"></div>
                                <div>建筑物照片</div>
                            </div>
                        </div>
                        <div class="info">
                            <upload-pictrue :fileList="jzwImgs" :imgType="1"></upload-pictrue>
                        </div>
                    </div>
                    <div class="infoBox"
                        v-if="detailForm.taskCheckFillList?.length > 0 && detailForm.taskCheckFillList[0].dangerDesc != ''">
                        <div class="title">
                            <div class="title-left">
                                <div class="titleIcon"></div>
                                <div>隐患信息</div>
                            </div>
                        </div>
                        <div class="info-box" v-for="( item, index ) in  detailForm.taskCheckFillList " :key="index">
                            <div class="info-title">
                                第{{ index + 1 }}条
                            </div>
                            <div class="danger-box">
                                <div class="danger-title">
                                    隐患内容
                                </div>
                                <div class="info-danger">
                                    {{ item.dangerDesc }}
                                </div>
                            </div>

                            <div class="photo-box">
                                <div class="photo-title">
                                    隐患照片
                                </div>
                                <upload-pictrue :fileList="item.photoUrls" :imgType="1"></upload-pictrue>
                            </div>
                        </div>
                    </div>
                    <div class="infoBox" v-if="detailForm.remark">
                        <div class="info-box">
                            <div class="danger-box noborder">
                                <div class="danger-title">
                                    备注
                                </div>
                                <div class="info-danger">
                                    {{ detailForm.remark }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="infoBox" v-if="detailForm.taskStatus > 2">
                        <div class="result">
                            <div class="result-title">主办人签字</div>
                            <div style="color: var(--van-primary-color)" @click="goSign(1)">
                                查看签名
                            </div>
                        </div>
                        <div class="result">
                            <div class="result-title">协办人签字</div>
                            <div style="color: var(--van-primary-color)" @click="goSign(2)">
                                查看签名
                            </div>
                        </div>
                        <div class="result">
                            <div class="result-title">被检查单位人员签字</div>
                            <div style="color: var(--van-primary-color)" @click="goSign(3)">
                                查看签名
                            </div>
                        </div>
                    </div>
                    <div class="infoBox"
                        v-if="detailForm.checkResult == 2 && detailForm.taskStatus >= 4 && detailForm.checkTypeName !== '其他' && detailForm.checkTypeName !== '复查' && detailForm.processType != ''">
                        <div class="title">
                            <div class="title-left">
                                <div class="titleIcon"></div>
                                <div>处置信息</div>
                            </div>
                        </div>
                        <div class="info">
                            <div class="clBox">
                                处理方式：{{ showPRO(detailForm.processType) }}
                            </div>

                            <template v-if="detailForm.processType.indexOf('2') !== -1">
                                <div class="clBox">
                                    相关文书：
                                </div>
                                <div class="wsBox" v-if="detailForm.orderCorrectFileUrl != ''">
                                    <div class="ws-left">
                                        <img src="../../assets/images/wsYes.png" alt="" />
                                        <div>责令改正通知书.doc</div>
                                    </div>
                                    <div class="ws-right" @click="viewFile(detailForm.orderCorrectFileUrl)">
                                        查看
                                    </div>
                                </div>

                                <div class="wsBox"
                                    v-if="detailForm.fileInfoList[0].newFileUrl && detailForm.fileInfoList[0].newFileUrl != ''">
                                    <div class="ws-left">
                                        <img src="../../assets/images/wsYes.png" alt="" />
                                        <div>送达回证.doc</div>
                                    </div>
                                    <div class="ws-right" @click="viewFile(detailForm.fileInfoList[0].newFileUrl)">
                                        查看
                                    </div>
                                </div>

                                <div class="clBox" style="margin-top: 12px;">
                                    是否复查：{{ ['否', '是'][detailForm.reviewVal] }}
                                </div>
                            </template>
                        </div>
                        <div class="line10"></div>
                        <upload-pictrue v-if="checkType == 'hz'" :fileType="5" :titelText="'送达回证'"
                            :fileList="licenseSdList" :imgType="0" :maxCount="1"
                            @fileListFun="licenseSdFun"></upload-pictrue>
                    </div>

                </van-tab>
                <van-tab title="审批信息" v-if="recordData.length > 0">
                    <van-steps direction="vertical" :active="active2" v-if="recordData.length > 0">
                        <van-step v-for="( item, index ) in recordData" :key="index">
                            <div class="setpBox">
                                <div class="setpBox-title">
                                    <div class="title1">{{ item.flowNodeName }}</div>
                                    <div class="tag1" :class="item.nodeStatus == 1
        ? 'orige'
        : item.nodeStatus == 2
            ? 'green'
            : item.nodeStatus == 3
                ? 'red'
                : ''
        ">
                                        {{
        item.nodeStatus == 1
            ? '待审批'
                                        : item.nodeStatus == 2
                                        ? '已同意'
                                        : item.nodeStatus == 3
                                        ? '不同意'
                                        : ''
                                        }}
                                    </div>
                                </div>
                                <div class="setpBox-con">
                                    <div class="top">
                                        <div class="topName">{{ item.approveName }}</div>
                                        <div class="topTime">{{ item.approveTime }}</div>
                                    </div>
                                    <div class="bot">
                                        {{ item.approveOpinions }}
                                    </div>
                                </div>
                            </div>
                        </van-step>

                    </van-steps>
                    <div class="empty" v-else>
                        <img src="../../assets/images/empty2.png" alt="" />
                        <div>暂无审批数据</div>
                    </div>
                    <div class="margin-bottom-20"></div>

                </van-tab>
            </van-tabs>

            <van-popup v-model:show="signPicker" round position="bottom" closeable>
                <van-image style="width: 100%;height: 500px;" v-if="signFlag == 1" :src="sign1" />
                <van-image style="width: 100%;height: 500px;" v-if="signFlag == 2" :src="sign2" />
                <van-image style="width: 100%;height: 500px;" v-if="signFlag == 3" :src="sign3" />
            </van-popup>
        </div>
        <div class="infoBox submitBtn2" v-if="(detailForm.taskStatus == 1 &&
      (userId == detailForm.checkerId || userId == detailForm.organizerId)) ||
      (detailForm.taskStatus == 4 && (userId == detailForm.checkerId || userId == detailForm.organizerId)) ||
      detailForm.reviewType === 1 ||
      detailForm.registerType === false
      ">
            <van-button block type="primary" v-if="detailForm.taskStatus == 1 &&
      (userId == detailForm.checkerId || userId == detailForm.organizerId)
      " @click.stop="startCheck()">
                开始检查
            </van-button>
            <van-button block type="primary" v-if="detailForm.handleShowFlag == 1 &&
      (userId == detailForm.checkerId || userId == detailForm.organizerId) && !checkType
      " @click.stop="resultCheck(detailForm.id, detailForm.checkResult)">
                结果处理
            </van-button>
            <van-button block type="primary" v-if="detailForm.reviewType === 1" @click="goCheck()">
                复查
            </van-button>
            <van-button block type="primary" v-if="detailForm.registerType === false"
                @click="goRegister(detailForm.id)">
                立案
            </van-button>

            <van-button block type="primary" v-if="detailForm.taskStatus == 4 &&
      (userId == detailForm.checkerId || userId == detailForm.organizerId) && checkType"
                @click="submitResult(detailForm.id,checkType)">
                {{checkType=='other'?'提交':'受案登记'}}
            </van-button>
        </div>
        <div class="submitBtn2" v-if="checkType=='hz'">
            <van-button block type="primary" @click="submit(detailForm.id)">
                提交
            </van-button>
        </div>
    </div>
</template>

<script setup>
import { showFailToast, showNotify, showConfirmDialog } from 'vant'
import { imgUrlToBase64 } from '../../util/util'
const { usePublic, useApproval, useTasks, useVision } = $globalStore
const userId = ref(JSON.parse(sessionStorage.getItem('userInfo')).id)
const router = useRouter()
const route = useRoute()
const id = ref(route.query.id)
const detailForm = ref({})
const checkType = ref(route.query.checkType)
//建筑物照片
const jzwImgs = ref([])
const yyzzImgs = ref([])
const activeNames = ref(['1'])
const ruleItemRespList = ref([])

const sign = ref('')
const signPicker = ref(false)
const signView = async (val) => {
    if (val == 1 || val == 2) {
        let arr = detailForm.value.checkerSign.split(',')
        let str = ''
        if (val == 1) {
            str = arr[0]
        } else {
            str = arr[1]
        }
        const r = await usePublic.bindFileUrl(str)
        if (r.code == 0) {
            imgUrlToBase64(r.data).then((s) => {
                sign.value = s
                signPicker.value = true
            })
        }
    } else {
        const r = await usePublic.bindFileUrl(detailForm.value.enterpriserSign)
        if (r.code == 0) {
            imgUrlToBase64(r.data).then((s) => {
                sign.value = s
                signPicker.value = true
            })
        }
    }
}

const sign1 = ref('')
const sign2 = ref('')
const sign3 = ref('')
const signFlag = ref(0)
const goSign = (val) => {
    signFlag.value = val
    signPicker.value = true
}

const showPRO = (val) => {
    let str = ''
    let arr = val.split(',')
    arr.forEach((item, index) => {
        str = str + (index >= 1 ? '，' : '') + ['受案登记', '当场处罚', '责令改正'][+item]
    });
    return str
}
//审批记录
const active2 = ref(0)
const recordData = ref([])
const getApproveRecord = async () => {
    const res = await useApproval.approveRecord(id.value)
    if (res.code == 0) {
        recordData.value = res.data
        for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index]
            if (element.nodeStatus == 2) {
                active2.value++
            } else {
                return
            }
        }
    }
}

//结果处理
const resultCheck = (id, checkResult) => {
    if (from.value == 2) {
        if (checkResult == '1') {
            router.push({ name: 'checkNumberSet', query: { id: id } })
        } else {
            router.push({ name: 'checkDaysResult', query: { id: id } })
        }
    } else {
        if (checkResult == '1') {
            router.push({ name: 'checkSuperviseNumber', query: { id: id } })
        } else {
            if (checkTypeName == '监督检查') {
                router.push({ name: 'checkResultTask', query: { id: id } })
            } else if (checkTypeName == '其他') {
                router.push({ name: 'detailSuperviseTask', query: { id: id, checkType: 'other' } })
            } else {
                router.push({ name: 'detailSuperviseTask', query: { id: id, checkType: 'fc' } })
            }
        }
    }
}
//立案
const goRegister = (id) => {
    router.push({
        name: 'addRegisterTask',
        query: {
            id: '',
            taskId: id,
            queryForm: JSON.stringify(detailForm.value.placeInfo),
        },
    })
}
//开始检查
const startCheck = async () => {
    const res = await useVision.taskStart(id.value)
    if (res.code == 0) {
        if (from.value == 2) {
            router.push({ name: 'checkDaysTask', query: { id: id.value } })
        } else {
            router.push({ name: 'checkSuperviseTask', query: { id: id.value } })
        }


    }
}
//复查
const goCheck = async () => {
    router.push({ name: 'addDaysTask', query: { id: id.value, reCheck: 1 } })
}

const submitResult = (id, type) => {
    showConfirmDialog({
        title: '提示',
        message: '是否确定结束任务？',
    })
        .then(() => {
            processFireInspeTask2(id, type)
        })
        .catch(() => {
            // on cancel
        })
}

const processFireInspeTask2 = async (idd, type) => {
    let params = {
        id: idd,
    }
    let res = await useVision.processFireInspeTaskInfo(params)
    if (res.code == 0) {
        //根据不同情况跳转到不同的页面
        if (type == 'other') {
            router.push({ name: 'superviseList' })
        } else {
            router.push({ name: 'addRegisterTask', query: { id: '', taskId: id.value } })
        }
    } else {
        showFailToast(res.message)
    }
}

//查看文件
const viewFile = async (url) => {
    router.push({
        name: 'fileDetail',
        query: {
            url: url,
        },
    })
}



//送达回证
const licenseSdList = ref([])
const licenseSdFun = (val) => {
    uploadCaseFile(val[0])
}
const uploadCaseFile = async (newFileUrl) => {
    let params = {
        taskId: detailForm.value.id,
        type: 10
    }
    const res = await useTasks.delfirerec(params)
}

const submit = () => {
    if (licenseSdList.value.length <= 0) return showNotify({
        type: 'danger',
        message: '请上传送达回证',
    })
    showConfirmDialog({
        title: '提示',
        message: '是否确定结束任务？',
    })
        .then(() => {
            processFireInspeTask()
        })
        .catch(() => {
            // on cancel
        })
}
const processFireInspeTask = async () => {
    let params = {
        id: detailForm.value.id,
        fileUrl: licenseSdList.value[0],
        type: 0
    }
    const res = await useTasks.delrec(params)
    if (res.code == 0) {
        router.push({ name: 'superviseList' })
    } else {
        showFailToast(res.message)
    }
}



onMounted(async () => {
    if (id.value != '') {
        const res = await useApproval.approveInfo(id.value)
        if (res.code == 0) {
            licenseSdList.value = []
            res.data.fileInfoList.forEach(async item => {
                if (item.fileType == 8) {
                    let r1 = await usePublic.bindFileUrl(item.newFileUrl)
                    licenseSdList.value.push(r1.data)
                }
            })
            res.data.taskCheckFillList.forEach(async (item) => {
                let urlarr = []
                let newList = item.photoUrls.map(async item => {
                    let arr = await usePublic.bindFileUrl(item)
                    urlarr.push(arr.data)
                    return arr
                })
                await Promise.all(newList);
                item.photoUrls = urlarr
            })
            if (res.data.checkerSign != '') {
                let s = res.data.checkerSign.split(',')
                const r = await usePublic.bindFileUrl(s[0])
                if (r.code == 0) {
                    imgUrlToBase64(r.data).then((s) => {
                        sign1.value = s
                    })
                }
                const d = await usePublic.bindFileUrl(s[1])
                if (d.code == 0) {
                    imgUrlToBase64(d.data).then((r) => {
                        sign2.value = r
                    })
                }
            }
            if (res.data.enterpriserSign != '') {
                const t = await usePublic.bindFileUrl(res.data.enterpriserSign)
                if (t.code == 0) {
                    imgUrlToBase64(t.data).then((r) => {
                        sign3.value = r
                    })
                }
            }

            detailForm.value = res.data
            getApproveRecord()
            jzwImgs.value = []
            if (res.data.placePhotoUrl != '') {
                let arr = res.data.placePhotoUrl.split(',')
                arr.forEach(async (element) => {
                    const r = await usePublic.bindFileUrl(element)
                    if (r.code == 0) {
                        jzwImgs.value.push(r.data)
                    }
                })
            }
            yyzzImgs.value = []
            if (res.data.buseLicence != '') {
                let arr = res.data.buseLicence.split(',')
                arr.forEach(async (element) => {
                    const r = await usePublic.bindFileUrl(element)
                    if (r.code == 0) {
                        yyzzImgs.value.push(r.data)
                    }
                })
            }

        } else {
            showFailToast(res.message)
        }
    }
})
</script>

<style lang="scss" scoped>
.steps-active-icon {
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    background: #e61f20;
    border: 3px solid #ffc4c4;
    border-radius: 50%;
}


.detailTask {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    background-color: #f7f7f7;
    box-sizing: border-box;

    .margin-bottom-20 {
        margin-bottom: 20px;
    }

    .detail {
        width: 100%;
        height: calc(100% - 46px);
        overflow-y: auto;
        margin-top: 46px;

        .btn-box {
            padding: 10px 10px;
        }

        .infoBox {
            background-color: #ffffff;
            margin: 10px 8px;
            border-radius: 8px;

            .title {
                padding: 16px 12px;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #f5f5f5;

                .title-left {
                    display: flex;
                    align-items: center;

                    .titleIcon {
                        width: 4px;
                        height: 14px;
                        background: linear-gradient(180deg, #5688f5 0%, #1764ce 100%);
                        border-radius: 20px;
                        margin-right: 8px;
                    }
                }

                .title-right {
                    padding: 5px 12px;
                    font-size: 14px;
                    font-weight: 400;
                    letter-spacing: 0px;
                    line-height: 20px;
                    color: #1764ce;
                    background-color: rgba(23, 100, 206, 0.1);
                    border-radius: 4px;
                }
            }

            .info {
                padding: 16px 12px;

                .infoItem {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 12px;

                    .left {
                        font-size: 15px;
                        font-weight: 400;
                        letter-spacing: 0px;
                        line-height: 22px;
                        color: #8c8c8c;
                        min-width: 120px;
                        margin-right: 20px;
                    }

                    .right {
                        width: 1px;
                        font-size: 15px;
                        font-weight: 400;
                        letter-spacing: 0px;
                        line-height: 22px;
                        color: #2b2b2b;
                        text-align: right;
                        flex: 1;
                        word-wrap: break-word;
                        /* 设置自动换行 */
                    }
                }

                .infoItem:last-child {
                    margin-bottom: 0;
                }

                .danger {
                    margin-bottom: 12px;
                }

                .danger:last-child {
                    margin-bottom: 0;
                }
            }

            .signBox {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 15px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 24px;

                .left {
                    color: #4d4d4d;
                }

                .right {
                    color: #1764ce;
                }
            }
        }

        .yinH {
            background-color: #ffffff;

            .checkItem {
                .checkItem-title {
                    padding: 16px 12px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .text {
                        display: flex;
                        align-items: center;

                        .icon {
                            width: 4px;
                            height: 14px;
                            border-radius: 20px;
                            background: linear-gradient(180deg,
                                    rgba(86, 136, 245, 1) 0%,
                                    rgba(23, 100, 206, 1) 100%);
                            margin-right: 8px;
                        }

                        .txt {
                            height: 24px;
                            font-size: 17px;
                            font-weight: 500;
                            letter-spacing: 0px;
                            line-height: 24px;
                            color: #2b2b2b;
                        }
                    }

                    .img {
                        width: 20px;
                        height: 20px;
                    }
                }
            }
        }

        .jcText {
            padding: 0 20px;
            display: flex;
            align-items: center;

            .icon {
                width: 4px;
                height: 14px;
                border-radius: 20px;
                background: linear-gradient(180deg,
                        rgba(86, 136, 245, 1) 0%,
                        rgba(23, 100, 206, 1) 100%);
                margin-right: 8px;
            }

            .txt {
                height: 24px;
                font-size: 17px;
                font-weight: 500;
                letter-spacing: 0px;
                line-height: 24px;
                color: #8c8c8c;
            }
        }
    }
}

.ruleItemTitle {
    display: flex;
    align-items: center;

    img {
        width: 18px;
        height: 18px;
        margin-right: 4px;
    }

    div {
        color: #4d4d4d;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 24px;
    }
}

.childList-1 {
    padding: 16px 16px 0 16px;

    .childList-title {
        padding-bottom: 16px;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 24px;
        color: #666666;
        border-bottom: 1px solid #f5f5f5;
    }

    .childList-item {
        padding: 16px 16px;
        border-bottom: 1px solid #f5f5f5;
    }

    .childList-item:last-child {
        border-bottom: none;
    }
}


.childList-2 {
    .childList-title {
        padding: 16px 16px 0 16px;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 24px;
        color: #666666;
        border-top: 1px solid #f5f5f5;
    }

    .childList-item {
        padding: 16px;
        color: #2b2b2b;
    }
}

.checkTask .van-field__control {
    padding: 0 !important;
}

.line4 {
    width: 100%;
    height: 4px;
    background-color: #f7f7f7;
}

.setpBox {
    background-color: #ffffff;
    border-radius: 4px;

    .setpBox-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 12px;
        border-bottom: 1px solid #f5f5f5;

        .title1 {
            font-size: 17px;
            font-weight: 500;
            letter-spacing: 0px;
            line-height: 24px;
            color: #4d4d4d;
        }

        .tag1 {
            padding: 5px 8px;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 20px;
        }
    }

    .setpBox-con {
        padding: 16px;

        .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;

            .topName {
                font-size: 16px;
                font-weight: 500;
                letter-spacing: 0px;
                line-height: 24px;
                color: #2b2b2b;
                max-width: 130px;
            }

            .topTime {
                font-size: 14px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 20px;
                color: #8c8c8c;
            }
        }

        .bot {
            font-size: 15px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 21px;
            color: #8c8c8c;
            word-break: break-all;
        }
    }
}

.green {
    background-color: rgba(2, 173, 130, 0.1);
    color: #02ad82;
}

.orige {
    background-color: rgba(252, 119, 10, 0.1);
    color: #fc770a;
}

.red {
    background-color: rgba(255, 77, 77, 0.1);
    color: #ff4d4d;
}

.empty {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // position: absolute;
    // left: 50%;
    // top: 50%;
    // transform: translate(-50%, -50%);
    // text-align: center;

    >img {
        width: 128px;
        height: 96px;
    }

    >div {
        margin-top: 12px;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: rgba(153, 153, 153, 1);
    }
}

.info-box {
    padding: 16px 12px;
    border-bottom: 1px solid rgba(245, 245, 245, 1);

    .info-title {
        /** 文本1 */
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        color: rgba(102, 102, 102, 1);
    }

    .danger-box {
        padding: 8px 0 16px 0;
        border-bottom: 1px solid rgba(245, 245, 245, 1);

        .danger-title {
            /** 文本1 */
            font-size: 15px;
            font-weight: 400;
            line-height: 20px;
            color: rgba(77, 77, 77, 1);
            margin-bottom: 8px;
        }

        .info-danger {
            /** 文本1 */
            font-size: 15px;
            font-weight: 400;
            line-height: 24px;
            color: rgba(43, 43, 43, 1);
        }
    }

    .noborder {
        border: none;
    }

    .photo-box {
        padding-top: 16px;

        .photo-title {
            /** 文本1 */
            font-size: 15px;
            font-weight: 400;
            line-height: 20px;
            color: rgba(77, 77, 77, 1);
            margin-bottom: 8px;
        }
    }
}

.result {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f5f5f5;

    .result-title {
        // width: 140px;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: #4d4d4d;
    }
}

.wsBox {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .ws-left {
        max-width: 250px;
        display: flex;
        align-items: center;
        color: #2b2b2b;
        font-size: 15px;
        font-weight: 500;

        >img {
            width: 36px;
            height: 36px;
        }
    }

    .ws-right {
        min-width: 50px;
        color: #1764ce;
        font-size: 14px;
        font-weight: 400;
    }
}

.clBox {
    color: #2b2b2b;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 12px;
}

.style1 {
    width: 30px;
    height: 14px;
    background: blue;
    float: right;
}

.style2 {
    width: 30px;
    height: 14px;
    background: yellow;
    float: right;
}

.style3 {
    width: 30px;
    height: 14px;
    background: orange;
    float: right;
}

.style5 {
    width: 30px;
    height: 14px;
    background: red;
    float: right;
}
</style>